<template>
  <Drawer>
    <div class="scroll">
      <a-input-search
        search-button
        allow-clear
        class="search"
        placeholder="输入分类名称"
        v-model="searchVal"
      />

      <div class="scroll-content">
        <a-tree
          :checkable="true"
          v-model:checked-keys="checkedKeys"
          :check-strictly="checkStrictly"
          :data="treeData"
          :fieldNames="{
            key: 'name',
            title: 'name',
          }"
          @select="getTreeId"
          @check="checkTree"
        >
          <!-- <template #title="nodeData">
                <template
                  v-if="((index = getMatchIndex(nodeData?.name)), index < 0)"
                  >{{ nodeData?.name }}</template
                >
                <span v-else>
                  {{ nodeData?.name?.substr(0, index) }}
                  <span style="color: var(--color-primary-light-4)">
                    {{ nodeData?.name?.substr(index, searchVal.length) }} </span
                  >{{ nodeData?.name?.substr(index + searchVal.length) }}
                </span>
              </template> -->
        </a-tree>
      </div>
    </div></Drawer
  >
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, watchEffect } from 'vue';
  import {
    GetWarehouseAll,
    postWarehouse,
    putWarehouse,
    delWarehouse,
  } from '@/api/inventory-management/warehouse-management/warehouse-list/index';
  import mitter from '@/utils/mitt';

  let searchVal = ref(''); // 搜索框
  let originTreeData = ref([]); // 储存最初的树形数据
  let expandKey: any = ref([]); // 储存当前搜索要展开的选项
  const checkStrictly = ref(true);

  // 搜索值
  const searchData = (keyword: string) => {
    const loop = (data: any) => {
      const result: any = [];
      data.forEach((item: any) => {
        if (item.name.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
          result.push({ ...item });
        } else if (item.children) {
          const filterData = loop(item.children);
          if (filterData.length) {
            result.push({
              ...item,
              children: filterData,
            });
            expandKey.value.push(item.id);
          }
        }
      });
      return result;
    };

    return loop(originTreeData.value);
  };

  const isCollapsed = ref(false);
  const collapse = (collapsed: boolean) => {
    isCollapsed.value = collapsed;
  };

  /* 储存实时的属性数据 */
  const treeData = computed(() => {
    if (!searchVal.value) return originTreeData.value;
    return searchData(searchVal.value);
  });

  const tree = (data: any) => {
    data.forEach((element: any) => {
      element.children = element.children || [];
      if (element.children) tree(element.children);
      if (element.warehouseShelves) {
        element.warehouseShelves.forEach((ele) => {
          element.children.push({ ...ele });
        });
        element.children = element.warehouseShelves;
      }
    });
    return data;
  };

  // 获取列表数据
  const getData = async () => {
    try {
      const data: any = {};
      const res = await GetWarehouseAll({
        ...data,
        page: 1,
        size: 99999,
      });
      originTreeData.value = tree(res.content);
    } catch (error: unknown) {
      console.log(error);
    }
  };
  getData();

  // 获取符合的数据
  const getMatchIndex = (name: string): number => {
    if (!searchVal.value) return -1;
    return name.toLowerCase().indexOf(searchVal.value.toLowerCase()) as number;
  };

  const getMatchInfo = (e: number[], val: any) => {};

  const getTreeId = (e: number[], val: any) => {
    mitter.emit('locationId', val.node);
  };

  const checkTreeData = ref([]);
  const isMark = ref();
  const checkTree = (e, val) => {
    checkTreeData.value = val.checkedNodes;
    isMark.value = val.checkedNodes.length
      ? val.checkedNodes[val.checkedNodes.length - 1].mark
      : 0;
    mitter.emit('checkTree', {
      isMark: isMark.value,
      checkedNodes: checkTreeData.value,
    });
  };

  // watchEffect(() => {
  //   if (checkTreeData.value) {
  //     isMark.value = checkTreeData.value[checkTreeData.value.length - 1].mark;
  //   } else {
  //     isMark.value = 0;
  //   }
  // });
</script>

<style scoped lang="less">
  .layout-demo {
    width: 200px;
    background-color: #f5f7fa;

    // height: 300px;
    .scroll {
      padding: 10px;
      .search {
        background-color: #fff;
        height: 40px;
        border: 1px solid #ccc;
      }
    }
  }
</style>
